<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="static/send.png" type="image/x-icon">

    <title>{{ the_title }}</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="https://v3.bootcss.com/examples/signin/signin.css" rel="stylesheet">
    <style>
        body {
            background-color:lightskyblue;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            margin-top:       5%;
            margin-bottom:    5%;
            margin-left:      10%;
            margin-right:     10%;
            padding: 0;
        }
        .container {
            width: 100%;
            background-color: black;
            border: 1px solid white;
            border-radius: 20px 20px 20px 20px;
            float: left;
        }
        h1 {
            display: block;
            margin-block-start: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            color: black;
        }
        p {
            color: black;
            margin-block-end: 1em;
        }
        .btn-primary{
            background-color: #a0c7e8;
            border-color:#a0c7e8;
        }
    </style>
</head>
<body>

{% extends 'base.html' %}

{% block body %}
<meta charset="UTF-8">
<h1>{{ the_title }}</h1>
    <p>结合了高德 API 中的地理编码和公交路径规划功能，在下方输入结构化地址即可获得公交路径规划。</p>
<form method='POST' action='/results'>
    <table>
        <p>请输入你当前地址，目的地及高德api密钥</p>
        <tr><td>出发点：</td><td><input name='start_address' type='text'></td></tr>
        <tr><td>目的地：</td><td><input name='end_address' type='text'></td></tr>
        <tr><td>密钥</td><td><input name='key' type='password' style="width: 30em;"></td></tr>
    </table>
    <p>准备就绪后，单击此按钮：</p>
    <p><input value='提交' type='SUBMIT'></p>
</form>

{% endblock %}

 </div>

</body>
</html>